
.box {
  margin-left:  .4rem;
  .today_box {
    // color: green;
    width: 9.2rem;
    position: relative;
    // background: pink;
    .today_teaching {
      width: 9.2rem;
      height: 3.333333rem;
      overflow: hidden;
      position: relative; // 是后面的背景图好根据这个来进行定位
      background: rgba(250,250,250,0);
      border-radius: .026667rem;
      border: 1px solid #cccccc;
      // box-shadow:50px 50px 50px 50px #ffffff;
      p{
        margin-left: .266667rem;
      }
      &_p1 {
        font-size: .4rem;
        font-weight: 700;
        margin: .4rem 0;
        color: #feffff;
      }
      &_p2 {
        font-size: .293333rem;
        // font-weight: 700;
        color: #b1b1b1;
        margin: .213333rem 0;
      }
      &_p3 {
        font-size: .293333rem;
        // font-weight: 700;
        color: #b1b1b1;
        margin: .213333rem 0;
      }
      // 右边授课的样式
      &_shouke {
        width: 2.666667rem;
        height: 3.333333rem;
        position: absolute;
        top: 0;
        right: 0;
        text-align: center;
        overflow: hidden;
        &_p {
          margin-top: 1.466667rem;
          // display: inline-block;
          // vertical-align: middle;
          &_span {
            display: inline-block;
            // height: .266667rem;
            height: .373333rem;
            font-size: .373333rem;
            color: pink;
            font-weight: 600;
            margin-right: .346667rem;
          }
          img {
            display: inline-block;
            // margin-top: .04rem;
            width: .32rem;
            height: .32rem;
            vertical-align: middle;
          }
        };
      }
      // 这里是老师信息的样式
      &_message {
        // display: none; 带时候设置样式的时候可以
        margin-left: .266667rem;
        img {
          display: inline-block;
          margin-right: .2rem;
          vertical-align: middle;
        }
        &_name {
        display: inline-block;
        }
      }
      
    }
    &_img1 {
      position: absolute;
      left: -.266667rem; //因为做外层的盒子有margin值所有这里为负值
      top: 0;
      z-index: -1;
    }
    &_img2 {
      position: absolute;
      right: 0; //因为做外层的盒子有margin值所有这里为负值
      top: 2.23rem;
      z-index: -1;
      img {
        height:1.333333rem;
      }
    }

    // 课程准备部分的样式
    .today_preparation {  // 这里的几个p的样式是直接进行复用了的
      margin-top: .4rem;
      width:  9.2rem;
      height: 2.4rem;
      border: .013333rem solid #cccccc;
      position: relative;
      .today_box_img1 { // 设置课程准备的背景色
        position: absolute;
        left: 0;
        top: 0;
        z-index: -2;
        display: none;
      }
      .today_box_img2 { // 谁知课程准备右下角的背景色
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: -2;
        display: none;
      }
      p {
        margin-left: .266667rem;
      }
      .today_teaching_p1 {
        font-size: .4rem;
        font-weight: 700;
        // margin: .4rem 0 .4rem 0;
        color: #343434;
      }
      // 更改右边复用定位后的状态
      .today_teaching_shouke { // 设置右边的高度
        height: 2.4rem;
        .today_teaching_shouke_p2 { //设置右边的p垂直居中  设置的是课程准备中的那个样式
          width: 100%;
          margin-top: 1rem;
        }
        .today_teaching_shouke_left { // 两个p标签的设置
          float: left;
          width: 1.6rem;
          margin-right: .293333rem;
          &_p1 {
            font-size: .346667rem;
            color: #aab2b4;
            margin-left: 0;
            margin-top: 1rem;
            margin-bottom: .133333rem;
          }
        }
        .images {
          float: left;
          vertical-align: middle;
          margin-top: 1.173333rem;
        }
      }
    }
  }
}


